<template>
    <div>
        <div>
            <div style="float:left">
                <Input style="width:250px" v-model="insName">
                <span slot="prepend">学院名称：</span>
                <Button slot="append" icon="ios-search" @click='findByInsName'></Button>
                </Input>
            </div>
            <Button-group style="visibility:hidden">
                <Button >将应用添加到学院</Button>
            </Button-group>
    
        </div>
    
        <Table border stripe :columns="header" :data="data_list" size="small" ref="table" class="table"  @on-row-click="rowClick"></Table>
    
    </div>
</template>
<script>
export default {
    data() {
        return {

            //初始化url
            init_url: '/mes/core/app/getAll',


            //表格标题
            header: [
                {
                    type: 'index',
                    width: 60,
                    align: 'center'
                },
                {
                    "title": "学院名称",
                    "key": "insName",
                    "width": 120,
                    "sortable": true,
                     render: (h, params) => {
                        return h('div', {                         
                        },params.row.instituteEntity.name)
                    }
                },
                {
                    "title": "应用名称",
                    "key": "appName",
                    "min-width": 120,
                    "sortable": true,
                     render: (h, params) => {
                        return h('div', {                         
                        },params.row.baseApplicationEntity.name)
                    }
                },
                {
                    "title": "创建时间",
                    "key": "createTime",
                    "width": 120,
                    "sortable": true
                },
              
            ],
            ruleValidate: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
            },
            //表格数据源
            data_list: [],
            //表格数据源缓存
            data_cache_list: [],
            //选中的数据的应用id集合
            data_select_list: [],
            //查询的名称
            insName: '',

        }
    },
    methods: {
        //到处excel
        exportData(type) {
            if (type === 1) {
                this.$refs.table.exportCsv({
                    filename: '原始数据'
                });
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '排序和过滤后的数据',
                    original: false
                });
            }
        },
        rowClick(row){
            this.$emit('getAppId', row.id);
        },

        //根据学院名称查询学院
        findByInsName() {
            this.insName = this.$stringUtil.stringTrim(this.insName);
            var name = this.insName;

            if (name == "") {
                this.data_list = this.data_cache_list.slice();
                return;
            }
            console.log(this.data_cache_list);
            var match = this.$stringUtil.stringMatch;
            this.data_list = $.grep(this.data_cache_list, function (value) {
                if (match(value.instituteEntity.name, name)) {
                    return value;
                }
            });
        },

    },
    mounted() {

        var _self = this;

        //初始化表单数据
        this.$ajax.get(_self.init_url)
            .then(function (response) {
                _self.data_list = response.data;
                _self.data_cache_list = _self.data_list.slice();
            })
            .catch(function (error) {
                console.log(error);
            });
    },

}
</script>

<style>
.btn-group {
    margin-bottom: 5px;
}
</style>
